<template>
  <div class="user_login" :style="{ height: evieHeight}">
    <img :style="{ height: evieHeight}" class="bg" src="../../../static/img/login/login_backroung.png">
    <!-- <img class="user_logo" src="../../../static/img/login/logo.png">
    <img class="user_wenz" src="../../../static/img/login/wenz.png"> -->
    <div class="title">毛球智慧矿场运维系统运维人员登录</div>  
    <input v-model="user" class="user_phone" type="number" placeholder="请输入手机号" maxlength="12">
    <input v-model="password" class="user_phone user_phon1" type="password" placeholder="请输入密码" maxlength="20">
    <div class="user_to" @click="login">登录</div>
  </div>
</template>

<script>
import qs from "qs";
import md5 from "../../utils/md5";
import js from "../../utils/js"
export default {
  data() {
    return {
      evieHeight: "",
      user: "",
      password: ""
    };
  },
  components: {},
  mounted() {
    console.log(new Date());
    this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
  },
  methods: {
    login() {
      if (this.user.trim() == "") {
        wx.showToast({
          title: "请输入电话号码",
          icon: "none"
        });
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.user.trim())) {
        wx.showToast({
          title: "电话号码格式错误",
          icon: "none"
        });
        return;
      }
      if (this.password.trim() == "") {
        wx.showToast({
          title: "请输入密码",
          icon: "none"
        });
        return;
      }
      let left = this;
      let params = {
        mobile: left.user,
        password: left.password,
        type: "operation",
        timestamp: Date.parse(new Date()) / 1000,
        sign: md5(
          Date.parse(new Date()) / 1000 + "2y92rfa969y4hyjrwuqjygog3zcu50l3"
        )
      };
      //this.$API = js(wx);	
      this.$API
        .post("/Login/userLogin", {
          mobile: left.user,
          password: left.password,
          type: "operation",
        })
        .then(res => {
          wx.showToast({
            title: res.msg,
            icon: "none"
          });
          wx.setStorage({
            key: "user_id",
            data: res.result.user_id
          });
          wx.setStorage({
            key: "user_token",
            data: res.result.user_token
          });
          wx.setStorage({
            key: "is_auth",
            data: res.result.is_auth
          });
          setTimeout(() => {
            wx.reLaunch({
              url: "../../pages/Operation/main"
            });
          }, 200);
        });
   
   
   
   }
  },

  created() {}
};
</script>
<style scoped>
.user_login {
  width: 750rpx;
  position: relative;
  padding: 1px;
}
.bg {
  width: 751rpx;
  height: 436rpx !important;
  /* position: absolute; */
  z-index: -1;
}
.user_logo {
  width: 300rpx;
  height: 78rpx;
  margin-top: 140rpx;
  margin-left: 225rpx;
}
.user_wenz {
  width: 518rpx;
  height: 98rpx;
  margin-top: 80rpx;
  margin-left: 116rpx;
}
.title{
  margin-top: 70rpx;
  color: #999999;
  font-size: 28rpx;
  text-align: center;
}
.user_phone {
  width: 634rpx;
  margin-top: 40rpx;
  margin-left: 48rpx;
  padding-left: 20rpx;
  background-color: #f5f5f5;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.user_phon1 {
  margin-top: 30rpx;
}
.user_verification {
  width: 654rpx;
  margin-left: 48rpx;
  height: 80rpx;
  margin-top: 40rpx;
  position: relative;
  background-color: white;
  border-radius: 8rpx;
}
.user_verification input {
  width: 434rpx;
  padding-left: 20rpx;
  height: 80rpx;
  position: absolute;
  font-size: 28rpx;
}
.user_verification div {
  width: 200rpx;
  font-size: 28rpx;
  color: #BDBDC2;
  position: absolute;
  text-align: center;
  line-height: 40rpx;
  right: 0;
  top: 20rpx;
  border-left: 2rpx solid #BDBDC2;
}
.user_to {
  width: 634rpx;
  margin-left: 48rpx;
  padding-left: 20rpx;
  background-color: #20c9e1;
  height: 80rpx;
  border-radius: 8rpx;
  margin-top: 50rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  color: white;
}
</style>
